<!DOCTYPE html>
<html>
<head>
  <title>Electroscopes</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="physics-canvas" width="800" height="450"></canvas>
  <script>
    const canvas = document.getElementById('physics-canvas');
    const ctx = canvas.getContext('2d');

    // Function to draw an electroscope
    function drawElectroscope(x, leafAngleDegrees) {
      const y_base_top = 350;
      const r_base = 50;
      const y_case_center = 250;
      const r_case = 100;
      const y_ball_center = 100;
      const r_ball = 15;
      const stem_half_width = 5;
      const stem_top = y_ball_center + r_ball;
      const y_leaf_joint = 235;
      const leaf_length = 50;

      // Base (filled semi-circle)
      ctx.fillStyle = 'black';
      ctx.beginPath();
      ctx.arc(x, y_base_top, r_base, 0, Math.PI, false);
      ctx.fill();

      // Glass Case (stroked circle)
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(x, y_case_center, r_case, 0, 2 * Math.PI);
      ctx.stroke();

      // Metal Ball (stroked circle)
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.arc(x, y_ball_center, r_ball, 0, 2 * Math.PI);
      ctx.stroke();
      
      // Stem is an outlined structure that joins the V-shaped leaves.
      // Based on the image, the stem and leaves form a single forked structure.
      const leafAngleRad = leafAngleDegrees * Math.PI / 180;
      const leaf_end_y = y_leaf_joint + leaf_length * Math.cos(leafAngleRad);
      const leaf_end_x_offset = leaf_length * Math.sin(leafAngleRad);
      
      // The stem and leaves appear to be a single path structure.
      // Let's draw it as such for accuracy.
      ctx.lineWidth = 3;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';

      const path = new Path2D();
      // Left side of the fork
      path.moveTo(x - stem_half_width, stem_top);
      path.lineTo(x - stem_half_width, y_leaf_joint);
      path.lineTo(x - leaf_end_x_offset, leaf_end_y);
      // Right side of the fork
      path.moveTo(x + stem_half_width, stem_top);
      path.lineTo(x + stem_half_width, y_leaf_joint);
      path.lineTo(x + leaf_end_x_offset, leaf_end_y);
      
      // The leaves in the image are thick bars. Let's represent this correctly.
      // We'll draw the stem as an outlined rectangle and the leaves as thick lines.
      ctx.lineWidth = 3;
      ctx.strokeRect(x - stem_half_width, stem_top, stem_half_width * 2, y_leaf_joint - stem_top);

      // Leaves (thick lines)
      ctx.lineWidth = 10;
      ctx.lineCap = 'butt';
      ctx.beginPath();
      ctx.moveTo(x, y_leaf_joint);
      ctx.lineTo(x - leaf_end_x_offset, leaf_end_y);
      ctx.moveTo(x, y_leaf_joint);
      ctx.lineTo(x + leaf_end_x_offset, leaf_end_y);
      ctx.stroke();
    }

    // --- Main Drawing ---

    // Define positions
    const x1 = 250; // Center of left electroscope
    const x2 = 550; // Center of right electroscope

    // Draw Electroscope 甲 (Jia) on the left - uncharged, leaves closed
    drawElectroscope(x1, 10);

    // Draw Electroscope 乙 (Yi) on the right - charged, leaves open
    drawElectroscope(x2, 25);

    // Draw the connecting metal rod
    const rod_y = 70;
    const rod_height = 20;
    const rod_radius = rod_height / 2;
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(x1, rod_y);
    ctx.lineTo(x2, rod_y);
    ctx.arc(x2, rod_y + rod_radius, rod_radius, -Math.PI / 2, Math.PI / 2, false);
    ctx.lineTo(x1, rod_y + rod_height);
    ctx.arc(x1, rod_y + rod_radius, rod_radius, Math.PI / 2, -Math.PI / 2, false);
    ctx.closePath();
    ctx.stroke();

    // Draw the labels
    ctx.fillStyle = 'black';
    ctx.font = '40px KaiTi'; // A font that resembles handwriting
    ctx.fillText('甲', 370, 280);
    ctx.fillText('乙', 670, 280);

  </script>
</body>
</html>